<!-- 首页 -->
<template>
	<view class="container">
		<view class="grid m-t16">
			<view class="grid-item" v-for="(item,index) in liquorList" :key="index" @click="handleSelectTag(item)"
				:class="{'grid-item-active':checkSelection(item)}">
				<text>{{item}}</text>
			</view>
		</view>
		<view class="m-t24">
			<view class="flex justify-between align-center">
				<view class="">
					<text class="f-s17 f-w500">您的酒量如何</text>
					<text class="f-s14 m-l10 text-gray">单选</text>
				</view>
			</view>
		</view>
		<view class="grid m-t16 m-b30">
			<view class="grid-item" v-for="(item,index) in capacityForLiquorList" :key="index"
				@click="handleSelectCapacityForLiquor(item)" :class="{'grid-item-active':item === capacityForLiquor}">
				<text>{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		drinkList
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		props: ['value'],
		data() {
			return {
				liquorList: [],
				capacityForLiquorList: [],
				capacityForLiquor: '',
				selection: []
			}
		},
		watch: {
			value: {
				immediate: true,
				async handler(value) {
					if (!this.liquorList.length) await this.getList()
					if (value) {
						if(value === '我不能喝酒') return
						let list = value.split('/').filter(Boolean);
						if (list.length) {
							let capacityForLiquor = this.capacityForLiquorList.indexOf(list[list.length - 1])
							if (capacityForLiquor !== -1) {
								this.capacityForLiquor = list[list.length - 1]
								this.selection = list.slice(0, list.length - 1)
							} else {
								this.selection = list
								// 单选默认选中一个
								this.handleSelectCapacityForLiquor(this.capacityForLiquorList[0])
							}
						} else {
							this.selection = []
						}
					}
				}
			}
		},
		methods: {
			async getList() {
				await drinkList().then(res => {
					let {
						data
					} = res
					this.liquorList = data[1]?.children?.[0]?.children?.map(item => item.title) ?? [];
					this.capacityForLiquorList = data[1]?.children?.[1]?.children?.map(item => item.title) ?? [];
					
				})
			},
			handleSelectCapacityForLiquor(val) {
				this.capacityForLiquor = val
				this.$emit("change", [...this.selection, this.capacityForLiquor])
			},
			checkSelection(val) {
				return this.selection.indexOf(val) !== -1
			},
			handleSelectTag(val) {
				let index = this.selection.indexOf(val)
				if (index !== -1) {
					this.selection.splice(index, 1)
				} else {
					this.selection.push(val)
				}
				this.$emit("change", [...this.selection, this.capacityForLiquor])
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.grid {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			// padding: 32rpx 0 62rpx 0;

			.grid-item {
				background-color: #F0F1F2;
				border-radius: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				width: 152rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				// padding: 16rpx 52rpx;
				// margin-right: 26rpx;
			}

			.grid-item-active {
				background-color: #FE3F59;
				color: #fff;
			}
		}
	}
</style>